<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品信息录入系统</title>
</head>
<body>
  <div id="app">
    <input-info @postpdata="getPData"></input-info>
    <products-show :pitems="products"></products-show>
  </div>
  <!-- 1.声明商品信息录入组件 -->
  <template id="hs_input_info">
    <div>
      <label for="">商品的名称:</label>
      <input type="text" placeholder="输入商品的名称" v-model="pname">
      <label for="">商品的数量:</label>
      <input type="text" v-model="pcount">
      <label for="">商品的价格:</label>
      <input type="text" v-model="pprice">
      <button type="button" @click="addProduct">添加</button>
    </div>
  </template>
  <!-- 2. 实现商品列表信息显示组件 -->
  <template id="products_show">
    <div>
      <button type="button" @click="showItems">显示商量列表</button>
      <!-- 商品列表 原打算用ul的方式实现，现在采用自定义列表组件的方式 -->
      <!-- 列表组件 -->
      <product-item :items="pitems"></product-item>
    </div>
  </template>
  <!-- 2. 1实现列表组件 -->
  <template id="product_item">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.pname }} : {{ item.pcount }} : {{ item.pprice }}
      </li>
    </ul>
  </template>


</body>
<script src="./src/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      // 商品的容器
      products: [
        // 模拟数据
        {pname: '小米13', pcount: 1000, pprice: 4500},
        {pname: 'ViVoX', pcount: 500, pprice: 3500},
        {pname: '华为Mete5pro', pcount: 200, pprice: 6000},
        {pname: '苹果13', pcount: 2000, pprice: 6400},
      ]
    },
    methods: {
      getPData(product){
        // 记录下来
        if (product) {
          this.products.unshift(product);
          console.log(this.products);
        } else {
          alert('商品数据出问题，请检查');
        }
      }
    },
    components: {
      productsShow: {
        template: '#products_show',
        data(){
          return {

          }
        },
        props: ['pitems'],
        methods: {
          showItems(){
            console.log(this.pitems);
          }
        },
        components: {
          productItem: {
            template: '#product_item',
            props: ['items']
          }
        }
      },
      inputInfo: {
        template: '#hs_input_info',
        data(){
          return {
            pname: '',
            pcount: 0,
            pprice: 0
          }
        },
        methods: {
          addProduct(){
            if (this.pname == '') return ;
            if (this.pcount == 0) return ;
            if (this.pprice == 0) return ;
            let item = {
              pname: this.pname,
              pcount: this.pcount,
              pprice: this.pprice
            };
            this.$emit('postpdata', item);
          }
        },
      }
    }
  });
</script>
</html>